<!DOCTYPE html>
<html lang="en">

<head>
    {include file="common/meta" /}
    <link rel="stylesheet" href="__CDN__/static/style/list.css" />
</head>

<body>
<div id="app">
    <!-- 头部 -->
    {include file="common/head" /}

    <!-- 内容 -->
    <el-main style="padding: 0;">
        {if $series}
        <!-- 东方韵 释雅趣 -->
        <el-row type="flex" justify="center">
            <el-col :span="24" style="text-align: center;">
                <img src="{$series.banner}" alt="{$series.name}" style="width: 100%" />
            </el-col>
        </el-row>
        <!-- 系列描述 -->
        <el-row type="flex" justify="center" style="padding-top: 100px;">
            <el-col :span="22" class="text-center">
                <h1 class="f-s-36">{$series.name}</h1>
                <h3 class="f-s-16 m-t-10">{$series.subtitle}</h3>
                <p class="f-s-14 l-h-30 m-t-60 m-b-120">
                    {$series.abstract}
                </p>
            </el-col>
        </el-row>
        {else}
        <el-row type="flex" justify="center" style="margin-top: 100px;">
            <el-col :span="24" style="text-align: center;">
                <img src="{$section.jianjie.image|cdnurl}" alt="{$section.jianjie.keywords}" style="width: 100%" />
            </el-col>
            <div class="p-a-full text-center">
                <el-row type="flex" class="row-bg" justify="center">
                    <el-col :xs="24" :sm="24" :md="12">
                        <p class="poetry-title">{$section.jianjie.keywords}</p>
                        <p class="poetry-subTitle">{$section.jianjie.description}</p>
                        <div class="poetry-content hidden-md-down">
                            {$section.jianjie.content}
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-row>
        {/if}
        <!-- 列表 -->
        <div class="product-list">
            <div v-for="(item, index) in listData" :key="index" class="product-item" :data-name="item.name" :data-price="item.price">
                <a :href="item.href"><img :src="item.image" :alt="item.name"></a>
                <div class="info">
                    <h3 class="name">{{ item.name }}</h3>
                    <p class="price">{{ item.price }}</p>
                </div>
            </div>
        </div>
    </el-main>
    <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
    <!-- 品牌故事 -->
    <el-row type="flex" justify="center" class="brand">
        <el-col :xs="24" :sm="24" :md="19" class="text-center">
            <img src="{$section.gushi.image|cdnurl}" alt="{$section.gushi.keywords}" />
        </el-col>
        <div class="p-a-full text-center" style="right: 14vw;">
            <el-row type="flex" class="row-bg" justify="end">
                <el-col :md="24" :lg="8" class="brand-wrap">
                    <p class="brand-logo"><img src="/static/images/logo2.png"></p>
                    <p class="brand-title">{$section.gushi.keywords}</p>
                    <div class="brand-content">
                        {$section.gushi.content}
                    </div>
                </el-col>
            </el-row>
        </div>
    </el-row>
    <!-- 底部 -->
    {include file="common/foot" /}
</div>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                activeIndex: "1",
                isMenuOpen: false,
                drawer: false,
                menuItems: [
                    {include file="common/head_js" /}
                ],
                // 轮播数据
                listData: [
                    {volist name="$list" id="vo"}
                    { image: "{$vo.image|cdnurl}", href: "{:url('/index/products/show',['id'=>$vo.id])}", name: "{$vo.name}", price: "￥{$vo.price}" },
                    {/volist}
                ],
                footerList: [
                    {include file="common/foot_js" /}
                ]
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
        },
    });
</script>
</body>
</html>